<!DOCTYPE html>
<html style="height: 100%" lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <base href="/">
    <link href="../static/css/toastr.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../static/css/index.css">
    <script src="../static/js/jquery.js"></script>

    <!--顶栏-->
    <script type="text/javascript" src="../static/js/flexible.js"></script>
    <script type="text/javascript" src="../static/js/echarts.min1.js"></script>
    <script type="text/javascript" src="../static/js/echarts.min.js"></script>

    <!-- 先引入jquery -->
    <script type="text/javascript" src="../static/js/jquery.js"></script>
</head>
<body style="height: 100%; margin: 0">
<header>
    <div class="left nav">
        <ul>
            <li class="nav_active"><i class="nav_1"></i><a href={% url 'index' %}>数据概览</a></li>
            <li><i class="nav_2"></i><a href={% url 'one' %}>各省市汽车总数</a></li>
            <li><i class="nav_3"></i><a href={% url 'two' %}>各省市碳排放量</a></li>
            <li><i class="nav_7"></i><a href={% url 'three' %}>各省市车类型</a></li>
            <li><i class="nav_9"></i><a href={% url 'four' %}>各省市绿化面积</a></li>
            <li><i class="nav_2"></i><a href={% url 'five' %}>各省市工厂数量</a></li>
        </ul>
    </div>
    <div class="showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                " - " +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
</header>
<section class="mainbox">
    <div class="column">
        <div class="panel bar">
            <h2></h2>
            <div class="chart" id="container1"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line">
            <h2></h2>
            <button type="button" id="subButton">预测</button>
            <div class="chart" id="container2"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
    <div class="column">
        <div class="center-body">
            <div class="map" id="map"></div>
        </div>
    </div>
</section>

<script src='../static/js/jquery.min.js'></script>
<script src="../static/js/script.js"></script>

<script src="../static/js/myMap.js"></script>
<script type="text/javascript" src="../static/js/toastr.min.js"></script>
<script src="../static/js/china1.js"></script>
<script src="../static/js/index1.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container1");
    var myChart1 = echarts.init(dom);
    dom = document.getElementById("container2");
    var myChart2 = echarts.init(dom);
    var app = {};

    var dataAxis;
    var data;
    var dataShadow = [];
    var option1;
    var option2;

    function ajax(year) {
        if(year ===2019 ||year === 2020){
            $.getJSON("{% url 'showIndex' %}", {year: year}, function (rawData) {
            dataAxis = rawData.data.map(function (entry) {
                return entry.date;
            });
            data = rawData.data.map(function (entry) {
                return entry.num;
            });
            {#console.log(data)#}
            {#console.log(dataAxis)#}
            var yMax = 40;

            for (var i = 0; i < data.length; i++) {
                dataShadow.push(yMax);
            }
            option1 = {
                title: {
                    left: 'center',
                    text: year + "年碳排放量(MtCO2)",
                    subtext: "数据来自" + year + "年",
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                xAxis: {
                    data: dataAxis,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: {
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: false
                    },
                    tittle: {
                        text: 'MtCO2'
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                visualMap: {
                    orient: 'horizontal',
                    left: 'center',
                    min: 20,
                    max: 45,
                    text: ['High', 'Low'],
                    textStyle: {
                        color: '#ffffff'
                    },
                    // Map the score column to color
                    dimension: 1,
                    inRange: {
                        color: ['#02e281', '#f67933', '#fc1c12']
                    }
                },
                series: [
                    {
                        type: 'line',
                        showBackground: true,
                        data: data,
                        label: {
                            normal: {
                                {#show: true,#}
                                position: 'inside',
                                color: '#fff'
                            }
                        },
                        markPoint: {
                            data: [
                                {
                                    type: 'max', name: '最大值'
                                },
                                {
                                    type: 'min', name: '最小值'
                                }
                            ]
                        }
                    }
                ]
            };

            if (option1 && typeof option1 === 'object') {
                if (year === 2019) myChart1.setOption(option1);
                if (year === 2020) myChart2.setOption(option1);
            }
        });
        }else{
            $.getJSON("{% url 'showPredict' %}", function (rawData) {
            dataAxis = rawData.data.map(function (entry) {
                return entry.date;
            });
            data = rawData.data.map(function (entry) {
                return entry.num;
            });
            {#console.log(data)#}
            {#console.log(dataAxis)#}
            var yMax = 40;

            for (var i = 0; i < data.length; i++) {
                dataShadow.push(yMax);
            }
            option1 = {
                title: {
                    left: 'center',
                    text: "未来一月碳排放量预测(MtCO2)",
                    subtext: "数据仅供参考",
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                xAxis: {
                    data: dataAxis,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z: 10
                },
                yAxis: {
                    axisLine: {
                        show: true
                    },
                    axisTick: {
                        show: false
                    },
                    tittle: {
                        text: 'MtCO2'
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
                visualMap: {
                    orient: 'horizontal',
                    left: 'center',
                    min: 20,
                    max: 45,
                    text: ['High', 'Low'],
                    textStyle: {
                        color: '#ffffff'
                    },
                    // Map the score column to color
                    dimension: 1,
                    inRange: {
                        color: ['#02e281', '#f67933', '#fc1c12']
                    }
                },
                series: [
                    {
                        type: 'line',
                        showBackground: true,
                        data: data,
                        label: {
                            normal: {
                                {#show: true,#}
                                position: 'inside',
                                color: '#fff'
                            }
                        },
                        markPoint: {
                            data: [
                                {
                                    type: 'max', name: '最大值'
                                },
                                {
                                    type: 'min', name: '最小值'
                                }
                            ]
                        }
                    }
                ]
            };

            if (option1 && typeof option1 === 'object') {
                myChart1.setOption(option1);
            }
        });
        }

        // Enable data zoom when user click bar.
        var zoomSize = 6;
        myChart1.on('click', function (params) {
            console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
            myChart1.dispatchAction({
                type: 'dataZoom',
                startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
            });
        });

    }

    ajax(2019);
    ajax(2020);

    $("#subButton").click(function () {
        console.log("点击了按钮");
        ajax();
    });
</script>
</body>
</html>